<template>
  <scroll-view
    :style="{ height: height }"
    :scroll-y="scrollY"
    :enable-flex="enableFlex"
    :refresher-enabled="enabled"
    :refresher-triggered="triggered"
    :refresher-threshold="threshold"
    :refresher-background="background"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
  >
    <slot></slot>
  </scroll-view>
</template>
<script lang="js" setup>
const triggered = ref(false) //当前下拉刷新状态
let timer = null //是否正在请求

const props = defineProps({
  background: {
    type: String,
    default: 'none',
  },
  height: {
    type: String,
    default: '100%',
  },
  threshold: {
    type: Number,
    default: 66,
  },
  enableFlex: {
    type: Boolean,
    default: true,
  },
  enabled: {
    type: Boolean,
    default: true,
  },
  scrollY: {
    type: Boolean,
    default: true,
  },
  time: {
    type: Number,
    default: 1000,
  },
})

onLoad(() => {
  triggered.value = false
  clearTimer()
})

// 往下拉
const onPulling = (e) => {}
// 往回推
const onRestore = () => {
  triggered.value = false // 需要重置
  clearTimer()
}
//到达自定义高度后触发
const emit = defineEmits(['scrollChange'])
const onRefresh = () => {
  triggered.value = true
  timer = setTimeout(() => {
    triggered.value = false
    emit('scrollChange', triggered.value)
  }, props.time)
}
// 被中止
const onAbort = () => {
  triggered.value = false
  clearTimer()
}

// 清除定时器
const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}
</script>
<style lang="scss" scoped></style>
